<template>
  <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="footer__navs">
            <div class="footer__nav footer__nav--1">
              <div class="footer__title"><svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'
                  viewBox='0 0 512 512'>
                  <polygon points='336 320 32 320 184 48 336 320'
                    style='fill:none;stroke-linejoin:round;stroke-width:32px' />
                  <path d='M265.32,194.51A144,144,0,1,1,192,320'
                    style='fill:none;stroke-linejoin:round;stroke-width:32px' /></svg> <span>FlixHub</span></div>

              <nav class="footer__list">
                <a href="about.html">关于我们</a>
                <a href="#">加入我们</a>
                <a href="contacts.html">联系我们</a>
                <a href="#">帮助中心</a>
              </nav>
            </div>

            <div class="footer__nav footer__nav--2">
              <div class="footer__title"><svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'
                  viewBox='0 0 512 512'>
                  <rect x='48' y='48' width='176' height='176' rx='20' ry='20'
                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                  <rect x='288' y='48' width='176' height='176' rx='20' ry='20'
                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                  <rect x='48' y='288' width='176' height='176' rx='20' ry='20'
                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                  <rect x='288' y='288' width='176' height='176' rx='20' ry='20'
                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' /></svg>
                <span>分类</span></div>

              <nav class="footer__list footer__list--double">
                <a href="#">二手闲置</a>
                <a href="#">失物招领</a>
                <a href="#">资源共享</a>
                <a href="#">校园论坛</a>
              </nav>

              <nav class="footer__list footer__list--double">
                <a href="#">帖子</a>
                <a href="#">视频</a>
                <a href="#">文章</a>
                <a href="#">作品</a>
              </nav>
            </div>

            <div class="footer__nav footer__nav--3">
              <div class="footer__title"><svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'
                  viewBox='0 0 512 512'>
                  <rect x='32' y='128' width='448' height='320' rx='48' ry='48'
                    style='fill:none;stroke-linejoin:round;stroke-width:32px' />
                  <path d='M144,128V96a32,32,0,0,1,32-32H336a32,32,0,0,1,32,32v32'
                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                  <line x1='480' y1='240' x2='32' y2='240'
                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                  <path d='M320,240v24a8,8,0,0,1-8,8H200a8,8,0,0,1-8-8V240'
                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' /></svg>
                <span>合作伙伴</span></div>

              <nav class="footer__list">
                <a href="#">FlixHub</a>
                <a href="#">西安工程大学</a>
                <a href="#">西安理工大学</a>
                <a href="#">西安科技大学</a>
              </nav>

              <div class="footer__contacts">
                <a class="footer__link" href="tel:+18092345678">+1 808 234 56 78</a>
                <a class="footer__link" href="mailto:support@flix.hub">support@flix.hub</a>

                <div class="footer__social">
                  <a class="fb" href="#"><svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'
                      viewBox='0 0 512 512'>
                      <path
                        d='M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z' />
                    </svg></a>
                  <a class="inst" href="#"><svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'
                      viewBox='0 0 512 512'>
                      <path
                        d='M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z' />
                      <path d='M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z' />
                      <path
                        d='M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z' />
                    </svg></a>
                  <a class="tw" href="#"><svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'
                      viewBox='0 0 512 512'>
                      <path
                        d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z' />
                    </svg></a>
                  <a class="vk" href="#"><svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'
                      viewBox='0 0 512 512'>
                      <path
                        d='M484.7,132c3.56-11.28,0-19.48-15.75-19.48H416.58c-13.21,0-19.31,7.18-22.87,14.86,0,0-26.94,65.6-64.56,108.13-12.2,12.3-17.79,16.4-24.4,16.4-3.56,0-8.14-4.1-8.14-15.37V131.47c0-13.32-4.06-19.47-15.25-19.47H199c-8.14,0-13.22,6.15-13.22,12.3,0,12.81,18.81,15.89,20.84,51.76V254c0,16.91-3,20-9.66,20-17.79,0-61-66.11-86.92-141.44C105,117.64,99.88,112,86.66,112H33.79C18.54,112,16,119.17,16,126.86c0,13.84,17.79,83.53,82.86,175.77,43.21,63,104.72,96.86,160.13,96.86,33.56,0,37.62-7.69,37.62-20.5V331.33c0-15.37,3.05-17.93,13.73-17.93,7.62,0,21.35,4.09,52.36,34.33C398.28,383.6,404.38,400,424.21,400h52.36c15.25,0,22.37-7.69,18.3-22.55-4.57-14.86-21.86-36.38-44.23-62-12.2-14.34-30.5-30.23-36.09-37.92-7.62-10.25-5.59-14.35,0-23.57-.51,0,63.55-91.22,70.15-122'
                        style='fill-rule:evenodd' /></svg></a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12">
          <div class="footer__wrap">
            <a class="footer__logo" href="index.html">
              <img src="@/assets/images/logo.svg" alt="logo">
            </a>

            <span class="footer__copyright">© 2022 FlixHub <br> Create by 
              <a href="https://themeforest.net/user/dmitryvolkov/portfolio" target="_blank">Dmitry Volkov</a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>
<script>
  export default {

  }
</script>
<style scoped>
  .footer {
    margin: 0px 0px;
    padding: 0px 180px;
    position: relative;
    display: block;
    height: auto;
    border-top: 1px solid rgba(219, 218, 218, 0.7);
    padding-top: 60px;
    z-index: -99!important;

    background-color: #ffffff;
  }

  .footer__wrap {
    border-top: 1px solid rgba(219, 218, 218, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    width: 100%;
    margin-top: 60px;
  }

  .footer__logo {
    display: block;
    width: 100px;
    height: auto;
  }

  .footer__logo img {
    width: 100%;
  }

  .footer__copyright {
    font-size: 12px;
    line-height: 20px;
    color: #585963;
    text-align: right;
  }

  .footer__copyright a {
    color: #585963;
  }

  .footer__copyright a:hover {
    color: #f26c2a;
  }

  .footer__nav {
    margin-bottom: 40px;
    position: relative;
  }

  .footer__nav:last-child {
    margin-bottom: 0;
  }

  .footer__title {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .footer__title svg {
    position: relative;
    z-index: 2;
    stroke: #795ab0;
    fill: #795ab0;
    width: 22px;
    height: auto;
    background-color: #fff;
  }

  .footer__title span {
    position: relative;
    z-index: 2;
    display: block;
    background-color: #fff;
    padding: 0 10px;
    font-size: 16px;
    color: #33373f;
    letter-spacing: 0.4px;
  }

  .footer__title:before {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: rgba(219, 218, 218, 0.7);
    z-index: 1;
  }

  .footer__list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer__list a {
    font-size: 14px;
    color: #585963;
    line-height: 26px;
    position: relative;
    padding-left: 20px;
    letter-spacing: 0.4px;
  }

  .footer__list a:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10px;
    background: url("@/assets/images/arrow.svg") no-repeat left center;
    background-size: 10px auto;
    opacity: 0.5;
    transition: 0.5s;
  }

  .footer__list a:hover {
    color: #33373f;
  }

  .footer__list a:hover:before {
    opacity: 1;
  }

  .footer__list--double:last-child {
    margin-top: 0;
  }

  .footer__contacts {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer__link {
    font-size: 16px;
    line-height: 30px;
    color: #33373f;
    font-family: 'Montserrat', sans-serif;
  }

  .footer__link:hover {
    color: #f26c2a;
  }

  .footer__social {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .footer__social svg {
    width: 20px;
    height: auto;
    stroke: #795ab0;
    fill: #795ab0;
    transition: 0.5s;
  }

  .footer__social a {
    margin-right: 15px;
  }

  .footer__social a:last-child {
    margin-right: 0;
  }

  .footer__social a.fb svg {
    stroke: #3b5999;
    fill: #3b5999;
  }

  .footer__social a.inst svg {
    stroke: #d43f81;
    fill: #d43f81;
  }

  .footer__social a.tw svg {
    stroke: #1da1f2;
    fill: #1da1f2;
  }

  .footer__social a.vk svg {
    stroke: #45668e;
    fill: #45668e;
  }

  .footer__social a:hover svg {
    stroke: #795ab0;
    fill: #795ab0;
  }

  @media (min-width: 576px) {
    .footer {
      padding-top: 70px;
    }

    .footer__wrap {
      margin-top: 70px;
    }
  }

  @media (min-width: 768px) {
    .footer {
      padding-top: 80px;
    }

    .footer__wrap {
      margin-top: 80px;
    }

    .footer__navs {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .footer__list--double {
      width: 50%;
    }

    .footer__list--double:last-child {
      margin-top: 20px;
    }

    .footer__nav {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .footer__nav--1 {
      width: calc(33.333333% - 15px);
    }

    .footer__nav--2 {
      width: calc(66.666666% - 15px);
    }

    .footer__nav--3 {
      width: 100%;
    }

    .footer__contacts {
      position: absolute;
      bottom: 0;
      right: 0;
      margin-top: 0;
      align-items: flex-end;
    }
  }

  @media (min-width: 1200px) {
    .footer {
      padding-top: 90px;
    }

    .footer__wrap {
      margin-top: 90px;
    }

    .footer__nav {
      margin-bottom: 0;
    }

    .footer__nav--1 {
      width: calc(20% - 20px);
    }

    .footer__nav--2 {
      width: calc(40% - 20px);
    }

    .footer__nav--3 {
      width: calc(40% - 20px);
    }
  }
</style>